<template class="login_template">
	
    <div class="background" :style="{backgroundImage:'url('+require('../assets/img/bg-1.jpg')+')'}">
    <!-- 血泪教训——:model 与 :rules 必须对应 -->
	<div class="login_cover">
		<div class="login-header">
          <div class="brand">
            <strong>创卷云CEPC</strong><br>
            <small>让出卷更容易</small>
          </div>
          <div class="icon">
            <i class="fa fa-sign-in"></i>
          </div>
        </div>
		<!-- 表单部分-->
		<div class="login-content">
          
            <el-form :rules="rules" class="login-container" label-position="left" :model="registerForm"
             ref="registerForm" label-width="0px" v-loading="loading" justify="center">
			
			<el-form-item  prop="email" style="margin:0px 0px">
              <el-input type="text" v-model="registerForm.email" auto-complete="off" placeholder="邮箱" style="width: 90%">
			  </el-input>
			  </el-form-item>
              <i class="addon fa fa-check"> </i>
            
			
            
			<el-form-item class="elfm" prop="password" style="margin:0px 0px">
              <el-input
                type="password"
                class=""
				v-model="registerForm.password"
                name="password"
                id="password"
                placeholder="密码"
                style="width: 90%"
              ></el-input>
			  </el-form-item>
              <i class="addon fa fa-check"></i>
            
			
            
			<el-form-item class="elfm" prop="passAgain" style="margin:0px 0px">
              <el-input
                type="password"
                class=""
				v-model="registerForm.passAgain"
                name="checkPwd"
                id="checkPwd"
                placeholder="确认密码"
                style="width: 90%"
              ></el-input>
			  </el-form-item>
              <i class="addon fa fa-check"> </i>
            
			
            
			<el-form-item class="elfm" prop="nickName" style="margin:0px 0px">
              <el-input
                type="text"
                class=""
				v-model="registerForm.nickName"
                name="nickName"
                id="nickName"
                placeholder="昵称"
                style="width: 90%"
              ></el-input>
			  </el-form-item>
              <i class="fa fa-check"></i>
           
			
            <div class="form-group m-b-20 form-inline" id="uploadImageDiv">
			<el-form-item class="elfm" prop="imgUrl">
              <el-input
                type="text"
                class="imgUrl"
				v-model="registerForm.imgUrl"
                name="imgUrl"
                id="imgUrl"
                placeholder="头像图片链接"
                style="width: 75%"
              />
			  <el-upload
				  class="avatar-bt"
				  action=""
				  ref="upload"
				  accept="image/jpeg,image/png,image/jpg"
				  :show-file-list="false"
				  :on-success="handleAvatarSuccess"
				  :before-upload="beforeAvatarUpload"
				  :http-request="UploadImage"
				>
              <el-button type="primary" size="mini" class="btn btn-info" @click="uploadImg">上传</el-button>
			  </el-upload>
			  </el-form-item>
			  <el-form-item>
			  <el-upload
				  class="avatar-uploader"
				  action=""
				  ref="upload"
				  accept="image/jpeg,image/png,image/jpg"
				  :show-file-list="false"
				  :on-success="handleAvatarSuccess"
				  :before-upload="beforeAvatarUpload"
				  :http-request="UploadImage"
				>
					  <img  :src="avatarUrl" class="avatar" />
				</el-upload>
	
			  </el-form-item>
              <!-- 上传图片文件 -->
              
            </div>
			
            <div class="login-buttons"
			v-on:click="submitClick('registerForm')"
			>
              <a
				
                id="submit"
                
                >注册</a>
            </div>
			
            <div id="CheckMsg" class="msg"></div>
			
          </el-form>
        </div>
		
    </div>
	</div>
</template>
<script>
  import {postRequest} from '../utils/api'
  import {putRequest} from '../utils/api'
  import {postJsonRequest} from '../utils/api'
  import {uploadFileRequest} from '../utils/api'

  
  export default{
    data(){
		var validatepassword = (rule,value,callback) => {
			if (value === ''){
				this.passwordnull=true;
				callback(new Error('请输入密码'));
			} else {
				this.passwordnull=false;
				callback();
			}
		};
		var validatename = (rule,value,callback) => {
			if (value===''){
				this.namenull=true;
				callback(new Error('请输入昵称'));
			} else {
				this.namenull=false;
				callback();
			}
		};
        var validatePassAgain = (rule, value, callback) => {
            if (value === '') {
				this.passAgainnull=true;
                callback(new Error('请再次输入密码'));
            } else if (value !== this.registerForm.password) {
				this.passAgainnull=true;
                callback(new Error('两次输入密码不一致!'));
            } else {
				this.passAgainnull=false;
                callback();
            }
        };
        var validateemail = (rule, value, callback) => {
			var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
			if (value === '') {
				this.emailnull=true;
                callback(new Error('请输入邮箱'));
            } else if(!reg.test(value)){
				this.emailnull=true;
				callback(new Error('邮箱格式不正确'));
			}else{
				this.emailnull=false;
				callback();
			}

		};
	
	
	
      return {
	    avatarUrl:require('../assets/img/blank.jpg'),
		emailnull:true,
		passwordnull:true,
		passAgainnull:true,
		namenull:true,
		urlnull:true,
		registerForm: {
		  email:"",
          password:"",
          passAgain:"",
          nickName:"",
		  imgUrl: ''  
        },
        rules: {
          email: [{validator : validateemail, trigger: 'blur'}],
          password: [{validator: validatepassword, trigger: 'blur'}],
          passAgain: [{validator : validatePassAgain, trigger: 'blur'}],
          nickName: [{validator: validatename, trigger: 'blur'}],
		  imgUrl: [{required: true, message: '请上传图片', trigger: 'blur'}],
        },
        loading:false,
        
      };
    },
	
    methods: {
		handleAvatarSuccess() {
		this.registerForm.imgUrl = this.avatarUrl;
		},
		
		beforeAvatarUpload(file) {
      // 类型
      const isJPG = true;
      // 大小
      const isLt2M = file.size / 1024 / 1024 < 2;
      // 类型限制
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      // 大小限制
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
		
		UploadImage(param){
      const formData = new FormData()
      formData.append('file', param.file)
      let headers = { "Content-Type": "multipart/form-data" };
      uploadFileRequest('/common/upload',formData).then(response => {
      	console.log('上传图片成功')
        param.onSuccess()
        console.log(response);
		this.avatarUrl=response.data.data.url;
		this.urlnull=false;
      }).catch(response => {
        console.log('图片上传失败')
		this.urlnull=true;
        param.onError()
      })
    },
		
      submitClick: function (registerForm) {
        var _this = this;
		if (this.emailnull||this.passwordnull||this.passAgainnull||this.namenull||this.urlnull) {
				this.$message.warning('请完善信息！');
                return;
            } else {
                this.loading = true;
            }
        this.$refs[registerForm].validate((valid => {
            if (valid) {
                this.loading = true;
            } else {
                this.$message.warning('请完善信息！');
                return;
            }
        }))
        return;
        delete this.registerForm.passAgain;
        postJsonRequest('/login/register', {
			user:{
				nickName:this.registerForm.nickName,
				image:this.registerForm.imgUrl
			},
			account:this.registerForm.email,
			password:this.registerForm.password
		}).then(
            resp => {
                _this.loading = false;
                if(resp.data.code == 0) {
                    _this.$message({
                        message: '注册成功，即将为您跳转到登录页面',
                        type: 'success'
                    });
                    this.$router.replace({path: '/', query: {userName: this.registerForm.nickName}});
                } else {
                    _this.$message.error('很遗憾，注册失败！请重试');
                    _this.registerForm['passAgain'] = '';
                }
            },
            resp => {
                _this.loading = false;
                _this.registerForm['passAgain'] = '';
            }
        )
      },
      uploadImg() {
        //   上传图片
      }
    }
 } 
</script>
<style scoped>
  .login-content{
    border-radius: 15px;
    background-clip: padding-box;
    margin:  auto auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background:rgba(0,0,0,0.5);
    height: 70vh;
    float: center;
    position: absolute;
    left: 500px;
    top:110px;
  }


  .background{
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    top: 0px;
    left: 0px;
    /* padding-top: 100hv; */
  }
  .login_cover{
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:rgba(0,0,0,0.5)
  }
  .login-header{
	position:absolute;
	top:50px;
	height:100px;
	width:300px;
	right:650px;
  }
  .icon{
	position:absolute;
	right:0px;
	top:0px;
	float:right;
	font-size:60px;
	color:white;
  }
  .brand{
	text-align:left;
	color:white;
  }
  strong{
  font-size:25px;
  }
 
  .login-buttons{
    cursor: pointer;
	position:absolute;
	top:510px;
	width:80px;
	padding:10px 10px;
	outline-style:none;
	border:0px;
	font-size:16px;
	border-radius:20px;
	left:50%;
	margin-left:-40px;
	color:white;
	background-color:red;
	box-shadow:6px 6px 3px rgba(139,26,26,0.3);
  }
  elfm{
	margin:0px 0px;
	padding:0px 0px;
  }
.avatar-uploader {
  margin-top: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 89px;
}
.avatar-bt{
	float:right;
}
</style>
<style >
.el-form-item{
margin:0px 0px;
}
</style>